<!--
  * 仓库主仓/移动仓
  *
-->
<template>
  <a-card class="tree-container" :style="{ height: appConfigStore.getLayoutContentClientRect.height + 'px' }">
    <template #title>
      <span style="font-size: 14px">仓库列表</span>
    </template>
    <a-tree v-if="!_.isEmpty(warehouseTreeData)" :selectedKeys="selectedKeys" :treeData="warehouseTreeData" default-expand-all auto-expand-parent :fieldNames="{ title: 'name', key: 'key' }" @select="onSelect">
      <template #title="{ name, id, attribute_type, warehouse_type }">
        <template v-if="[-1, -2].includes(id)">
          <div class="line-item">
            <Icon icon="svg-icon:warehouse" />
            <span>{{ id === -1 ? '固定主仓' : id === -2 ? '司机-移动车仓' : '业务员-移动车仓' }}</span>
          </div>
        </template>
        <template v-else>
          <div class="line-item">
            <Icon icon="svg-icon:warehouse-area" />
            <span class="item-name">{{ name }}</span>
            <span v-if="warehouse_type === 1"> ({{ getDescByValue('WAREHOUSE_ATTRIBUTE_TYPE', attribute_type) }}) </span>
          </div>
        </template>
      </template>
    </a-tree>
  </a-card>
</template>
<script setup lang="ts">
import _ from 'lodash'
import { warehouseApi } from '@/api/business/storage/warehouse-api'
import { useAppConfigStore } from '@/store/modules/app-store'
import { useEnums } from '@/hooks/plugins/useEnums'
import Icon from '@/components/framework/icon/index.vue'
import eventEmitter from '@/lib/event-emitter'

const appConfigStore = useAppConfigStore()
const { getDescByValue } = useEnums()

// ----------------------- 分类树的展示 ---------------------

// 分类树形数据
const warehouseTreeData = ref<any[]>([])
// 查询分类列表并构建仓库树
const selectedKeys = ref<string[]>([])
const queryData = async () => {
  const res = await warehouseApi.queryList()
  const { driverMobileWarehouse, mobileWarehouse, warehouse } = res.data
  warehouseTreeData.value = [
    {
      id: -1,
      key: '-1-1',
      name: '固定主仓',
      warehouse_type: 1,
      disabled: true,
      children: _(warehouse)
        .map((item) => ({ ...item, key: `${item.id}-${item.warehouse_type}` }))
        .sortBy(warehouse, 'sort')
        .value()
    },
    {
      id: -2,
      key: '-2-2',
      name: '司机-移动车仓',
      warehouse_type: 2,
      disabled: true,
      children: _(driverMobileWarehouse)
        .groupBy('code')
        .mapValues((item) => {
          const row = _.cloneDeep(item[0])
          return {
            code: row.code,
            name: row.man_name,
            accountable_id: row.accountable_id,
            accountable_type: row.accountable_type,
            warehouse_type: row.warehouse_type,
            status: row.status,
            sort: row.sort,
            key: `A-${item.map(({ id }) => id).join(',')}-${row.warehouse_type}`,
            id: item.map(({ id }) => id).join(','),
            children: _(item)
              .map((data) => ({ ...data, name: getDescByValue('WAREHOUSE_ATTRIBUTE_TYPE', data.attribute_type), key: `${data.id}-${data.warehouse_type}` }))
              .sortBy('attribute_type')
              .value()
          }
        })
        .values()
        .sortBy('sort')
        .value()
    },
    {
      id: -3,
      key: '-3-3',
      name: '业务员-移动主仓',
      warehouse_type: 2,
      disabled: true,
      children: _(mobileWarehouse)
        .groupBy('code')
        .mapValues((item) => {
          const row = _.cloneDeep(item[0])
          return {
            code: row.code,
            name: row.man_name,
            accountable_id: row.accountable_id,
            accountable_type: row.accountable_type,
            warehouse_type: row.warehouse_type,
            status: row.status,
            sort: row.sort,
            key: `A-${item.map(({ id }) => id).join(',')}-${row.warehouse_type}`,
            id: item.map(({ id }) => id).join(','),
            children: _(item)
              .map((data) => ({ ...data, name: getDescByValue('WAREHOUSE_ATTRIBUTE_TYPE', data.attribute_type), key: `${data.id}-${data.warehouse_type}` }))
              .sortBy('attribute_type')
              .value()
          }
        })
        .values()
        .sortBy('sort')
        .value()
    }
  ]
  const defaultWarehouse = `${warehouseTreeData.value[0]?.children[0]?.id}-${warehouseTreeData.value[0]?.children[0]?.warehouse_type}`
  selectedKeys.value = [defaultWarehouse]
  eventEmitter.emit('Custom:queryInventoryList', { id: warehouseTreeData.value[0]?.children[0]?.id })
}
onMounted(queryData)

// 选中tree
function onSelect(keys: string[], { node }) {
  selectedKeys.value = keys
  eventEmitter.emit('Custom:queryInventoryList', { id: node.id, warehouse_type: node.warehouse_type })
}
</script>
<style scoped lang="less">
:deep(.ant-card-body) {
  padding-top: 10px;
}
.tree-container {
  overflow-y: auto;
}
.popover-item-wrapper {
  display: flex;
  flex-direction: column;
}
.line-item {
  display: flex;
  gap: 4px;
  align-items: center;
}
.item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
